<template>
    <div class="attr-container">
        <p class="title">画布属性</p>
        <el-form style="padding: 20px;">
            <el-form-item v-for="(key, index) in Object.keys(options)" :key="index" :label="options[key]">
                <el-color-picker v-if="isIncludesColor(key)" v-model="canvasStyleData[key]"
                    show-alpha></el-color-picker>
                <el-upload class="avatar-uploader" v-else-if="key == 'backgroundImage'" :show-file-list="false"
                    :action="url" :headers="header" :on-success="handleAvatarSuccess">
                    <img v-if="canvasStyleData.backgroundImage" :src="canvasStyleData.backgroundImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-input v-else-if="isIncludesOpacity(key)" placeholder="0.1~1其他值无效"
                    v-model.number="canvasStyleData[key]" min="0.1" max="1" step="0.1" type="number"
                    @input="validateOpacity(key)" />
                <el-input v-else v-model.number="canvasStyleData[key]" type="number" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getToken } from '@/utils/auth';
export default {
    data() {
        return {
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
            options: {
                color: '颜色',
                opacity: '不透明度',
                backgroundColor: '背景色',
                fontSize: '字体大小',
                backgroundImage: '背景图片'
            },
            imageUrl: ""
        }
    },
    computed: mapState([
        'canvasStyleData',
    ]),
    methods: {
        validateOpacity(key) {
                if (this.canvasStyleData[key] < 0.1) {
                    this.canvasStyleData[key] = 0.1;
                } else if (this.canvasStyleData[key] > 1) {
                    this.canvasStyleData[key] = 1;
                }
            },
        isIncludesColor(str) {
            return str.toLowerCase().includes('color')
        },
        isIncludesOpacity(str) {
            return str.toLowerCase().includes('opacity')
        },
        isIncludesImages(str) {
            return str.toLowerCase().includes('backgroundImage')
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.canvasStyleData.backgroundImage = res.data.url
            console.log(res, file)
            console.log(this.canvasStyleData)
        }
    },
}
</script>

<style lang="scss">
.attr-container {
    .title {
        text-align: center;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid #e4e7ed;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
}
</style>
